<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="奖金详情" name="first">
        <el-table
          :data="tableData"
          :inline="true"
          border
          style="width: 100%"
          align="center"
        >
          <el-table-column
            prop="orderNumber"
            label="订单号"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="name"
            label="下级姓名"
            :show-overflow-tooltip="true"
          />
          <el-table-column width="120px" prop="phoneNumber" label="手机号" />
          <el-table-column
            prop="closeIncome"
            label="核验收入"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="orderStatusName"
            label="订单状态"
            :show-overflow-tooltip="true"
          />
          <el-table-column prop="teamPartnerStatus" label="是否合伙人" />
          <el-table-column prop="brokerBonus" label="奖金" />
          <el-table-column prop="createTime" label="日期" />
          <el-table-column
            label="操作"
            fixed="right"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="rewOrder(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <table class="table">
          <tr class="tr">
            <td>实际放款额</td>
            <td>奖励比例</td>
            <td>奖金预估</td>
          </tr>
          <tr>
            <td>1-30万（不含）</td>
            <td>0.5%</td>
            <td>
              <span v-if="this.sectionStatus == 1">{{ bonusAmount }}</span>
              <span v-else>0</span>
            </td>
          </tr>
          <tr>
            <td>30-150万（不含）</td>
            <td>0.6%</td>
            <td>
              <span v-if="this.sectionStatus == 2">{{ bonusAmount }}</span>
              <span v-else>0</span>
            </td>
          </tr>
          <tr>
            <td>150-300万（不含）</td>
            <td>0.8%</td>
            <td>
              <span v-if="this.sectionStatus == 3">{{ bonusAmount }}</span>
              <span v-else>0</span>
            </td>
          </tr>
          <tr>
            <td>300万以上</td>
            <td>1%</td>
            <td>
              <span v-if="this.sectionStatus == 4">{{ bonusAmount }}</span>
              <span v-else>0</span>
            </td>
          </tr>
        </table>

        <p>
          共￥{{ data.partnerBonus }}，{{ data.issueStatus }}, 发放人：{{
            data.issuer || "暂无数据"
          }}，发放日期：{{ data.issueTime || "暂无数据" }}
        </p>
      </el-tab-pane>
      <el-tab-pane label="当月团员统计" name="second">
        <el-table
          :data="detailsData"
          :inline="true"
          border
          style="width: 100%"
          align="center"
        >
         <el-table-column
            prop="memberName"
            label="团员名称"
            :show-overflow-tooltip="true"
          />
           <el-table-column
            prop="phoneNumber"
            label="手机号码"
            :show-overflow-tooltip="true"
          />
           <el-table-column
            prop="orderCount"
            label="总订单数"
            :show-overflow-tooltip="true"
          />
           <el-table-column
            prop="isPartner"
            label="是否是合伙人"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="actualAmount"
            label="实际放款额"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="bonusAmount"
            label="总奖金"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getPartnerData,
  getPartnerBonus,
  getTbleadgUrl,
  getPartnerPredict,
  getDetails
} from "@/assets/js/api";
export default {
  props: {
    diaId: {
      type: Number
    }
  },
  data() {
    return {
      tableData: [],
      data: {},
      sectionStatus: "",
      bonusAmount: "",
      activeName: "first",
      detailsData: []
    };
  },
  created() {
    this.getPartnerData();
    this.getPartnerBonus();
    this.getPartnerPredict();
    this.getDetails();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //获取详情
    getPartnerData() {
      getPartnerData(this.diaId).then(res => {
        this.tableData = res.data.records;
      });
    },
    getPartnerBonus() {
      getPartnerBonus(this.diaId).then(res => {
        this.data = res.data;
      });
    },
    //获取预估奖金查询
    getPartnerPredict() {
      getPartnerPredict(this.diaId).then(res => {
        this.sectionStatus = res.data.sectionStatus;
        this.bonusAmount = res.data.bonusAmount;
      });
    },
    getDetails() {
      getDetails(this.diaId).then(res => {
        this.detailsData = res.data;
      });
    },
    //查看订单
    rewOrder(obj) {
      getTbleadgUrl({
        orderNumber: obj.orderNumber
      }).then(res => {
        if (res.code == 200 && res.data != null) {
          //待放款页面
          let tbleadgUrl = res.data.lendingUrl;
          //归档页面
          let lendgUrl = res.data.pigeonholeUrl;
          sessionStorage.setItem("orderNumber", obj.orderNumber);
          switch (obj.orderStatus) {
            case 4:
              //跳转已放款页面
              this.$router.push({
                path: "/index/Released", //已放款
                query: { Restatus: true, status: false }
              });
              break;
            case 5:
              //跳转已归档页面
              this.$router.push(lendgUrl);
              break;
            default:
              this.$router.push({
                path: tbleadgUrl, //待放款
                query: { status: false }
              });
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.table {
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
  border-collapse: collapse;
  table-layout: fixed;
  border: none; 
  margin-top: 20px;
}
.table td {
  padding: 5px 0;
  font-size: 14px;
  color: #606266;
  text-align: center;
  padding: 12px 0;
  border: 1px #ebeef5 solid;
}
.table .tr td {
  color: #909399;
}
</style>
